<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`paper-checkbox` is a button that can be either checked or unchecked.  User
can tap the checkbox to check or uncheck it.  Usually you use checkboxes
to allow user to select multiple options from a set.  If you have a single
ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
instead.

Example:

    <paper-checkbox></paper-checkbox>

    <paper-checkbox checked></paper-checkbox>
    
Styling checkbox:

To change the ink color for checked state:

    paper-checkbox::shadow #ink[checked] {
      color: #4285f4;
    }
    
To change the checkbox checked color:

    paper-checkbox::shadow #checkbox.checked {
      border-color: #4285f4;
    }

To change the ink color for unchecked state:

    paper-checkbox::shadow #ink {
      color: #b5b5b5;
    }

To change the checbox unchecked color:

    paper-checkbox::shadow #checkbox {
      border-color: #b5b5b5;
    }

@group Paper Elements
@element paper-checkbox
@extends paper-radio-button
@homepage github.io
-->

<link rel="import" href="../paper-radio-button/paper-radio-button.html">

<polymer-element name="paper-checkbox" extends="paper-radio-button" role="checkbox">
<template>

  <link rel="stylesheet" href="paper-checkbox.css">

  <div id="checkboxContainer" class="{{ {labeled: label} | tokenList }}" >
  
    <paper-ripple id="ink" class="circle recenteringTouch" checked?="{{!checked}}"></paper-ripple>
     
    <div id="checkbox" on-animationend="{{checkboxAnimationEnd}}" on-webkitAnimationEnd="{{checkboxAnimationEnd}}"></div>
    
  </div>
  
  <div id="checkboxLabel" hidden?="{{!label}}">{{label}}<content></content></div>

</template>
<script>

  Polymer('paper-checkbox', {
    
    /**
     * Fired when the checked state changes.
     *
     * @event change
     */
    
    toggles: true,

    checkedChanged: function() {
      var cl = this.$.checkbox.classList;
      cl.toggle('checked', this.checked);
      cl.toggle('unchecked', !this.checked);
      cl.toggle('checkmark', !this.checked);
      cl.toggle('box', this.checked);
      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
      this.fire('change');
    },

    checkboxAnimationEnd: function() {
      var cl = this.$.checkbox.classList;
      cl.toggle('checkmark', this.checked && !cl.contains('checkmark'));
      cl.toggle('box', !this.checked && !cl.contains('box'));
    }

  });
  
</script>
</polymer-element>
